<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{width:1000px;margin: 0 auto;}
        .cont::after{content: "";width:0;height:0;overflow: hidden;clear: both;display: block;}
        .small_box{width:200px;height:300px;float: left;position: relative}
        .small_box img{width:200px;height:300px;}
        .small_box span{background: rgba(0,0,255,0.7);display: block;position: absolute;left: 0;top:0;display: none}

        .big_box{width:200px;height:300px;float: left;display: none;overflow: hidden;margin-left: 100px;position: relative;}
        .big_box img{width:400px;height:600px;position: absolute;left:0;top:0;}
    </style>
</head>
<body>
    <div class="cont">
        <div class="small_box">
            <img src="../imgs/1.jpg" alt="">
            <span></span>
        </div>
        <div class="big_box">
            <img src="../imgs/1.jpg" alt="">
        </div>
    </div>
</body>
<script>
    // OOA:放大镜，等比例移动
        // 选择元素
        // 绑定事件
            // 进入
                // 显示
            // 离开
                // 隐藏
            // 移动
                // 遮罩层跟随鼠标移动
                // 边界限定
                // 计算移动的距离占了总距离的比例
                // 根据比例，设置右侧图片的位置

    // OOD
        // function Magnifier(){
        //     // 1. 选择元素
        //     // 2. 绑定事件
        // }
        // Magnifier.prototype.addEvent = function(){
        //     // 进入事件
        //         // 3. 显示
        //     // 离开事件
        //         // 4. 隐藏
        //     // 移动事件
        //         // 5. 跟随移动功能，计算比例，设置位置
        // }
        // Magnifier.prototype.show = function(){
        //     // 显示
        // }
        // Magnifier.prototype.hide = function(){
        //     // 隐藏
        // }
        // Magnifier.prototype.move = function(){
        //     // 移动
        //     // 计算比例
        //     // 设置
        // }

    // OOP
        function Magnifier(){
            // 1. 选择元素
            this.sBox = document.querySelector(".small_box");
            this.span = document.querySelector(".small_box span");
            this.bBox = document.querySelector(".big_box");
            this.bImg = document.querySelector(".big_box img");

            // 2. 绑定事件
            this.addEvent();
        }
        Magnifier.prototype.addEvent = function(){
            var that = this;
            // 进入事件
            this.sBox.onmouseover = function(){
                // 3. 显示
                that.show()
            }
            // 离开事件
            this.sBox.onmouseout = function(){
                // 4. 隐藏
                that.hide();
            }
            // 移动事件
            this.sBox.onmousemove = function(eve){
                var e = eve || window.event;
                // 5. 跟随移动功能，计算比例，设置位置
                that.move(e);
            }
        }
        Magnifier.prototype.show = function(){
            // 显示
            this.span.style.display = "block";
            this.bBox.style.display = "block";

            // 计算右侧显示图片的比例
            // 向日葵班：总人30人，出来12人干活
            // 玫瑰班：总人42人，要求出同向日葵班的人数的比例的人数，干活
            // 玫瑰班要出的人数 = (向日葵12人 / 向日葵30人) * 玫瑰班42人

            this.span.style.width = (this.bBox.offsetWidth / this.bImg.offsetWidth) * this.sBox.offsetWidth + "px";
            this.span.style.height = (this.bBox.offsetHeight / this.bImg.offsetHeight) * this.sBox.offsetHeight + "px";

            // 提前获取各种尺寸，方便使用
            this.sBoxW = this.sBox.offsetWidth;
            this.sBoxH = this.sBox.offsetHeight;
            this.sBoxL = this.sBox.offsetLeft;
            this.sBoxT = this.sBox.offsetTop;
            this.spanW = this.span.offsetWidth;
            this.spanH = this.span.offsetHeight;
            this.bBoxW = this.bBox.offsetWidth;
            this.bBoxH = this.bBox.offsetHeight;
            this.bImgW = this.bImg.offsetWidth;
            this.bImgH = this.bImg.offsetHeight;

        }
        Magnifier.prototype.hide = function(){
            // 隐藏
            this.span.style.display = "none";
            this.bBox.style.display = "none";
        }
        Magnifier.prototype.move = function(e){
            // 计算要移动的距离
            var l = e.clientX - this.sBoxL - this.spanW/2;
            var t = e.clientY - this.sBoxT - this.spanH/2;
            // 边界限定
            if(l<0) l=0;
            if(t<0) t=0;
            if(l>this.sBoxW-this.spanW) l=this.sBoxW-this.spanW;
            if(t>this.sBoxH-this.spanH) t=this.sBoxH-this.spanH;

            // 移动
            this.span.style.left = l + "px";
            this.span.style.top = t + "px";
            // 计算比例
            var x = l / (this.sBoxW-this.spanW);
            var y = t / (this.sBoxH-this.spanH);
            // 设置给右侧图片的位置
            this.bImg.style.left = x * -Math.abs(this.bImgW - this.bBoxW) + "px";
            this.bImg.style.top = y * -Math.abs(this.bImgH - this.bBoxH) + "px";
        }


        new Magnifier;
        
</script>
</html>